<template>
    <van-cell center title="智能匹配">
        <template #right-icon>
            <van-switch v-model="isMatchMode" size="24" />
        </template>
    </van-cell>
    <user-card-list :user-list="userList" :loading="loading"/>
    <!-- 通用错误 -->
    <van-empty v-if="!userList || userList.length < 1"  description="搜索为空" />
</template>

<script setup lang="ts">
import {onMounted, ref, watchEffect} from 'vue';
import myAxios from "../plugins/myAxios.ts";
import {showFailToast, showToast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {UserType} from "../models/user";

const isMatchMode = ref<boolean>(false);

const userList = ref([]);
const loading = ref(true);

/**
 * 加载数据
 */
const loadData = async () => {
    let userListData;
    loading.value = true;
    // 根据标签匹配用户
    if (isMatchMode.value) {
        const num = 15;
        userListData = await myAxios.get('/user/match', {
            params: {
                num,
            },
        })
            .then(function (response) {

                return response?.data;
            })
            .catch(function (error) {
                console.error('/user/match error', error);
                showFailToast('请求失败');
            })
    } else {
        // 普通模式，直接分页查询用户
        userListData = await myAxios.get('/user/recommend', {
            params: {
                pageNum: 1,
                pageSize: 20,
            },
        }).then(function (response) {
            if(response.code === 40100){
                showFailToast('请登录后重试！');
            }
                return response?.data?.records;
            })
            .catch(function (error) {
                showFailToast('请求失败');
            })
    }

    // if (res?.code === 0) {
    //     teamList.value = res.data;
    // }  else if(res?.code === 40001){
    //     showFailToast('近期暂无队伍创建，快来创建队伍吧');
    // }else if(res?.code === 40100){
    //     showFailToast('请登录后重试！');
    // }
    if (userListData) {
        userListData.forEach((user: UserType) => {
            if (user.tags) {
                user.tags = JSON.parse(user.tags);
            }
        })
        userList.value = userListData;
    }
    loading.value = false;
}

watchEffect(() => {
    loadData();
})


</script>

<style scoped>

</style>